<template>
  <div class="mod-config">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="120px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品名称" prop="goodsname">
            <el-input
              v-model="dataForm.goodsname"
              maxlength="100"
              show-word-limit
              placeholder="商品名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品类型" prop="goodstype">
            <el-radio-group v-model="dataForm.goodstype" style="width: 50%">
              <el-radio :label="0">实物商品</el-radio>
              <el-radio :label="1">虚拟物品</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品分类" prop="goodscatidpath">
            <el-cascader
              v-model="dataForm.lstGoodscatidpath"
              style="width: 100%"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="本店路径" prop="shopcats">
            <el-cascader
              v-model="dataForm.lstGhopcatspath"
              style="width: 100%"
              :options="shopCatsOptions"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="品牌" prop="brandId">
            <el-select v-model="dataForm.brandId" style="width: 100%" placeholder="请选择">
              <el-option
                v-for="item in brands"
                :key="item.brandid"
                :label="item.brandname"
                :value="item.brandid"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品编号" prop="goodssn">
            <el-input v-model="dataForm.goodssn" placeholder="商品编号" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品货号" prop="productno">
            <el-input v-model="dataForm.productno" placeholder="商品货号" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品图片" prop="productno">
            <el-input v-model="dataForm.goodsimg" placeholder="图片路径" :readonly="true">
              <el-upload
                slot="append"
                :show-file-list="false"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                :on-success="handleAvatarSuccess"
                :action="uploadUrl"
                :with-credentials="true"
                :data="photo"
                class="upload-demo"
              >
                <el-button size="small" icon="el-icon-upload" type="primary">点击上传</el-button>
              </el-upload>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="line-height: 36px;height: 36px">
          <el-image
            style="width: 34px; height: 34px"
            :src="dataForm.goodsimgFullPath"
            :preview-src-list="dataForm.goodsimgFullPathArray"
          />
          请上传600*600的商品图片
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="市场价格" prop="marketprice">
            <el-input v-model.trim="dataForm.marketprice" placeholder="市场价格" @blur="inputMoney($event,'marketprice')">
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="店铺价格" prop="shopprice">
            <el-input
              v-model.trim="dataForm.shopprice"
              placeholder="店铺价格"
              @blur="inputMoney($event,'shopprice')"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="成本价格" prop="costprice">
            <el-input
              v-model="dataForm.costprice"
              placeholder="成本价格"
              @blur="inputMoney($event,'costprice')"
            >
              <template slot="prepend">¥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品单位" prop="goodsunit">
            <el-input v-model="dataForm.goodsunit" placeholder="商品单位" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品库存" prop="goodsstock">
            <el-input v-model="dataForm.goodsstock" placeholder="商品库存" @blur="inputMoney($event,'goodsstock')">
              <template slot="append">{{ dataForm.goodsunit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="预警库存" prop="warnstock">
            <el-input v-model="dataForm.warnstock" placeholder="预警库存" @blur="inputMoney($event,'warnstock')">
              <template slot="append">{{ dataForm.goodsunit }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品重量" prop="goodsweight">
            <el-input v-model="dataForm.goodsweight" placeholder="商品重量">
              <template slot="append">Kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品体积" prop="goodsvolume">
            <el-input v-model="dataForm.goodsvolume" placeholder="商品体积">
              <template slot="append">m³</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="SEO关键字" prop="goodsseokeywords">
            <el-input v-model="dataForm.goodsseokeywords" placeholder="SEO关键字" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="SEO描述" prop="goodsseodesc">
            <el-input v-model="dataForm.goodsseodesc" placeholder="SEO描述" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品促销信息" prop="goodstips">
            <el-input v-model="dataForm.goodstips" placeholder="商品促销信息" />
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品状态" prop="goodsstatus">
            <el-radio-group v-model="dataForm.goodsstatus" style="width: 50%">
              <el-radio :label="0">上架</el-radio>
              <el-radio :label="1">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="商品属性" prop="attributes">
            <el-checkbox-group v-model="dataForm.attributes" style="width: 100%">
              <el-checkbox label="isrecom">推荐</el-checkbox>
              <el-checkbox label="isbest">精品</el-checkbox>
              <el-checkbox label="isnew">新品</el-checkbox>
              <el-checkbox label="ishot">热销</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="是否包邮" prop="isfreeshipping">
            <el-radio-group v-model="dataForm.isfreeshipping">
              <el-radio :label="1">包邮</el-radio>
              <el-radio :label="2">买家承担运费</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="16">
          <el-form-item label="计价方式" prop="shippingfeetype">
            <el-radio-group v-model="dataForm.shippingfeetype" style="width: 70%">
              <el-radio :label="1">计件</el-radio>
              <el-radio :label="2">重量</el-radio>
              <el-radio :label="3">体积</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" />
      </el-row>
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="商品描述" prop="goodsdesc">
            <div class="mod-demo-ueditor">
              <script :id="ueId" class="ueditor-box" type="text/plain" style="width: 100%; height: 260px;">{{ dataForm.goodsdesc }}</script>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col style="text-align: right;">
        <el-button size="mini" icon="el-icon-close" @click="visible = false">取消</el-button>
        <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import ueditor from 'ueditor'
import { treeDataTranslate } from '@/utils'
import { getInputValue, delcommafy } from '@/utils/money'
import { isDecimal } from '@/utils/validate'
export default {
  data() {
    var isvalidDecimal = (rule, value, callback) => {
      if (!isDecimal(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      uploadUrl: this.$http.adornUrl(`/system/file/uploadShopGoods`),
      options: [],
      shopCatsOptions: [],
      brands: [],
      photo: {
        width: '600',
        height: '600',
        shopId: this.$store.state.user.shopId
      },
      dataForm: {
        goodsid: 0,
        goodssn: '',
        productno: '',
        goodsname: '',
        goodsimg: '',
        shopid: '',
        goodstype: 0,
        marketprice: '',
        shopprice: '',
        warnstock: '',
        goodsstock: '',
        goodsunit: '',
        goodstips: '',
        issale: '',
        isbest: '',
        ishot: '',
        isnew: '',
        isrecom: '',
        goodscatidpath: '',
        lstGoodscatidpath: [],
        lstGhopcatspath: [],
        goodscatid: '',
        shopcatid1: '',
        shopcatid2: '',
        brandid: '',
        goodsdesc: '12',
        goodsstatus: 0,
        salenum: '',
        saletime: '',
        visitnum: '',
        appraisenum: '',
        isspec: '',
        gallery: '',
        attributes: [],
        goodsseokeywords: '',
        illegalremarks: '',
        isfreeshipping: 1,
        goodsserachkeywords: '',
        goodsvideo: '',
        costprice: '',
        goodsvideothumb: '',
        goodsseodesc: '',
        shippingfeetype: 1,
        goodsweight: '',
        goodsvolume: '',
        goodsimgFullPath: '',
        goodsimgFullPathArray: [],
        shopexpressid: ''
      },
      dataRule: {
        goodssn: [
          { required: true, message: '商品编号不能为空', trigger: 'blur' }
        ],
        productno: [
          { required: true, message: '商品货号不能为空', trigger: 'blur' }
        ],
        goodsname: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],
        goodsimg: [
          { required: true, message: '商品图片不能为空', trigger: 'blur' }
        ],
        shopid: [
          { required: true, message: '门店ID不能为空', trigger: 'blur' }
        ],
        goodstype: [
          { required: true, message: '货物类型不能为空', trigger: 'blur' }
        ],
        marketprice: [
          { required: true, message: '市场价不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        shopprice: [
          { required: true, message: '商品价不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        warnstock: [
          { required: true, message: '预警库存不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        goodsstock: [
          { required: true, message: '商品总库存不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        goodsunit: [
          { required: true, message: '单位不能为空', trigger: 'blur' }
        ],
        goodstips: [
          { required: true, message: '促销信息不能为空', trigger: 'blur' }
        ],
        issale: [
          { required: true, message: '是否上架  0：不上架  1：上架不能为空', trigger: 'blur' }
        ],
        goodscatidpath: [
          { required: true, message: '商品分类路径不能为空', trigger: 'blur' }
        ],
        goodscatid: [
          { required: true, message: '最后一级商品分类ID不能为空', trigger: 'blur' }
        ],
        shopcatid1: [
          { required: true, message: '门店商品分类第一级ID不能为空', trigger: 'blur' }
        ],
        shopcatid2: [
          { required: true, message: '门店商品分类第二级ID不能为空', trigger: 'blur' }
        ],
        brandid: [
          { required: true, message: '品牌ID不能为空', trigger: 'blur' }
        ],
        goodsdesc: [
          { required: true, message: '商品描述不能为空', trigger: 'blur' }
        ],
        goodsstatus: [
          { required: true, message: '商品状态不能为空', trigger: 'blur' }
        ],
        salenum: [
          { required: true, message: '总销量不能为空', trigger: 'blur' }
        ],
        saletime: [
          { required: true, message: '上架时间不能为空', trigger: 'blur' }
        ],
        visitnum: [
          { required: true, message: '访问数不能为空', trigger: 'blur' }
        ],
        appraisenum: [
          { required: true, message: '评价数不能为空', trigger: 'blur' }
        ],
        isspec: [
          { required: true, message: '是否有规格不能为空', trigger: 'blur' }
        ],
        gallery: [
          { required: true, message: '商品相册不能为空', trigger: 'blur' }
        ],
        goodsseokeywords: [
          { required: true, message: '商品seo 关键字不能为空', trigger: 'blur' }
        ],
        illegalremarks: [
          { required: true, message: '状态说明不能为空', trigger: 'blur' }
        ],
        isfreeshipping: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        goodsserachkeywords: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        goodsvideo: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        costprice: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        goodsvideothumb: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        goodsseodesc: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        shippingfeetype: [
          { required: true, message: '计价方式不能为空', trigger: 'blur' }
        ],
        goodsweight: [
          { required: true, message: '商品重量不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        goodsvolume: [
          { required: true, message: '商品体积不能为空', trigger: 'blur' },
          { validator: isvalidDecimal, trigger: 'blur' }
        ],
        shopexpressid: [
          { required: true, message: '店铺快递公司ID不能为空', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.ue = ueditor.getEditor(this.ueId, {
      // serverUrl: '', // 服务器统一请求接口路径
      zIndex: 3000
    })
    // 商品目录
    this.$http({
      url: this.$http.adornUrl('/goods/shopCats/list'),
      method: 'get',
      params: this.$http.adornParams({
      })
    }).then(({ data }) => {
      if (data && data.list != null && data.list.length > 0) {
        var lst = []
        for (var i = 0; i < data.list.length; i++) {
          lst.push({
            value: data.list[i].catid,
            parentid: data.list[i].parentid,
            label: data.list[i].catname
          })
        }
        this.options = treeDataTranslate(lst, 'value', 'parentid')
      }
    })
    // 本店商品目录
    this.$http({
      url: this.$http.adornUrl('/goods/cats/listCats'),
      method: 'get',
      params: this.$http.adornParams({})
    }).then(({ data }) => {
      if (data && data.code === 0) {
        var lst = []
        if (data.page && data.page.list != null && data.page.list.length > 0) {
          for (var i = 0; i < data.page.list.length; i++) {
            lst.push({
              value: data.page.list[i].catid,
              parentid: data.page.list[i].parentid,
              label: data.page.list[i].catname
            })
          }
          this.shopCatsOptions = treeDataTranslate(lst, 'value', 'parentid')
        }
      }
    })
    this.$http({
      url: this.$http.adornUrl('/goods/brands/list'),
      method: 'get',
      params: this.$http.adornParams({})
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.brands = data.list
      }
    })
  },
  methods: {
    init(wares) {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        this.dataForm = wares
        this.dataForm.brandId = wares.brandid
        this.dataForm.lstGhopcatspath = []
        this.dataForm.lstGhopcatspath.push(this.dataForm.shopcatid1)
        this.dataForm.lstGhopcatspath.push(this.dataForm.shopcatid2)
        this.dataForm.goodsid = wares.goodsid
        this.dataForm.attributes = []
        this.dataForm.goodsimgFullPath = this.$http.adornUrl(`/system/file/downloadShopGoods/${wares.goodsimg}`)
        this.dataForm.goodsimgFullPathArray = []
        this.dataForm.goodsimgFullPathArray.push(this.dataForm.goodsimgFullPath)
        if (this.dataForm.goodscatidpath) {
          this.dataForm.lstGoodscatidpath = this.dataForm.goodscatidpath.split('_')
        }
      })
    },
    handleAvatarSuccess(response, file, fileList) {
      if (response.code === 0 && response.file) {
        this.dataForm.goodsimg = response.file.sysFileEncryptionName
        this.dataForm.goodsimgFullPath = this.$http.adornUrl(`/system/file/downloadShopGoods/${response.file.sysFileEncryptionName}`)
        this.dataForm.goodsimgFullPathArray = []
        this.dataForm.goodsimgFullPathArray.push(this.dataForm.goodsimgFullPath)
        debugger
      } else {
        this.$message.error(response.msg)
      }
    },
    handleChange(val) {
      console.log(val)
    },
    inputMoney(el, name) {
      this.dataForm[name] = getInputValue(el)
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm.goodsdesc = this.ue.getContent()
      if (this.dataForm.attributes != null && this.dataForm.attributes.length > 0) {
        for (var i = 0; i < this.dataForm.attributes.length; i++) {
          this.dataForm[this.dataForm.attributes[i]] = 1
        }
      }
      if (this.dataForm.lstGoodscatidpath != null && this.dataForm.lstGoodscatidpath.length > 0) {
        for (var j = 0; this.dataForm.lstGoodscatidpath.length > j; j++) {
          this.dataForm.goodscatidpath = this.dataForm.goodscatidpath +
                                            this.dataForm.lstGoodscatidpath[j] +
                                            '_'
          if (this.dataForm.lstGoodscatidpath.length - 1 === j) {
            this.dataForm.goodscatid = this.dataForm.lstGoodscatidpath[j]
          }
        }
      }
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/goods/wares/update`),
            method: 'post',
            data: this.$http.adornData({
              'goodsid': this.dataForm.goodsid || undefined,
              'goodssn': this.dataForm.goodssn,
              'productno': this.dataForm.productno,
              'goodsname': this.dataForm.goodsname,
              'goodsimg': this.dataForm.goodsimg,
              'shopid': this.dataForm.shopid,
              'goodstype': this.dataForm.goodstype,
              'marketprice': this.dataForm.marketprice == null ? null : parseFloat(delcommafy(this.dataForm.marketprice)),
              'shopprice': this.dataForm.shopprice == null ? null : parseFloat(delcommafy(this.dataForm.shopprice)),
              'warnstock': this.dataForm.warnstock == null ? null : parseFloat(delcommafy(this.dataForm.warnstock)),
              'goodsstock': this.dataForm.goodsstock == null ? null : parseFloat(delcommafy(this.dataForm.goodsstock)),
              'goodsunit': this.dataForm.goodsunit,
              'goodstips': this.dataForm.goodstips,
              'issale': this.dataForm.issale,
              'isbest': this.dataForm.isbest,
              'ishot': this.dataForm.ishot,
              'isnew': this.dataForm.isnew,
              'isrecom': this.dataForm.isrecom,
              'goodscatidpath': this.dataForm.goodscatidpath,
              'goodscatid': this.dataForm.goodscatid,
              'shopcatid1': this.dataForm.shopcatid1,
              'shopcatid2': this.dataForm.shopcatid2,
              'brandid': this.dataForm.brandId,
              'goodsdesc': this.dataForm.goodsdesc,
              'goodsstatus': this.dataForm.goodsstatus,
              'salenum': this.dataForm.salenum,
              'saletime': this.dataForm.saletime,
              'visitnum': this.dataForm.visitnum,
              'appraisenum': this.dataForm.appraisenum,
              'isspec': this.dataForm.isspec,
              'gallery': this.dataForm.gallery,
              'goodsseokeywords': this.dataForm.goodsseokeywords,
              'illegalremarks': this.dataForm.illegalremarks,
              'dataflag': this.dataForm.dataflag,
              'isfreeshipping': this.dataForm.isfreeshipping,
              'goodsserachkeywords': this.dataForm.goodsserachkeywords,
              'goodsvideo': this.dataForm.goodsvideo,
              'costprice': this.dataForm.costprice == null ? null : parseFloat(delcommafy(this.dataForm.costprice)),
              'goodsvideothumb': this.dataForm.goodsvideothumb,
              'goodsseodesc': this.dataForm.goodsseodesc,
              'shippingfeetype': this.dataForm.shippingfeetype,
              'goodsweight': this.dataForm.goodsweight == null ? null : parseFloat(delcommafy(this.dataForm.goodsweight)),
              'goodsvolume': this.dataForm.goodsvolume == null ? null : parseFloat(delcommafy(this.dataForm.goodsvolume)),
              'shopexpressid': this.dataForm.shopexpressid,
              'createtime': this.dataForm.createtime,
              'creator': this.dataForm.creator,
              'updatetime': this.dataForm.updatetime,
              'updater': this.dataForm.updater
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
  .edui-default .edui-toolbar .edui-combox .edui-combox-body {
    height: 20px !important;
  }
  .edui-default .edui-button-body,
  .edui-splitbutton-body,
  .edui-menubutton-body, .edui-combox-body {
    height: 20px !important;
  }
</style>
